<template>
  <div class="box">
    <el-card class="top">
      <h2>OA后台管理系统</h2>
      <el-form :model="ruleForm" :rules="rules" ref="ruleFormRef" status-icon label-width="150px">
        <el-form-item prop="userName">
          <el-input v-model="ruleForm.userName" :prefix-icon="Avatar" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop="userPwd">
          <el-input :prefix-icon="Unlock" type="password" autocomplete="off" v-model="ruleForm.userPwd">
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button color="#626aef" style="color: white" type="primary"  @click="setLogin()">登录</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div> 
</template>

<script>
import { reactive, toRefs, computed, watch, onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import api from "@/http/api.js";
// import {getMenu,setLogin} from "@/http/api.js"
// import {Menu,setLogin} from "@http/api.js";
import { useStore } from "vuex";
import { Avatar, Unlock } from "@element-plus/icons-vue";

export default {
  setup() {
    let router = useRouter();
    let store = useStore();
    const state = reactive({
      ruleForm: {
        userName: "",
        userPwd: ""
      },
      //进行验证
      rules: {
        userName: [
          { required: true, message: "请输入用户账户", trigger: "blur" }
        ],
        userPwd: [
          {
            required: true,
            min: 6,
            max: 16,
            message: "请输入账户密码 6-16位",
            trigger: "blur"
          }
        ]
      }
    });

    const ruleFormRef = ref();
    let setLogin = () => {
      ruleFormRef.value.validate(valid => {
        if (valid) {
          api.setLogin(state.ruleForm).then(res => {
            //判断是否成功
            if (res.code == 200) {
              store.dispatch("userInfos", res.data);
              store.dispatch("getLists");
              setTimeout(function() {
                router.push("/home");
              }, 500);
            }
          });
        } else {
          return false;
        }
      });
    };


    return {
      ...toRefs(state),
      setLogin,
      Avatar,
      Unlock,
      ruleFormRef
    };
  }
};
</script>

<style scoped lang='scss'>
* {
  box-sizing: border-box;
}
.box {
  background: url("../assets/微信图片_20220527193903.jpg");
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  position: fixed;
  background-size: 100% 100%;
  h2 {
    font-size: 20px;
    color: #ccc;
    font-weight: 700;
  }
  .top {
    width: 480px;
    height: 250px;
    position: relative;
    left: 50%;
    background: rgba(165, 124, 129, 0.5);
    transform: translate(-50%, 70%);
    border-radius: 20px;

    .el-form-item {
      padding: 5px 0px;
      .el-input {
        margin-left: -70px;
        margin-top: 10px;
      }

      .el-button {
        width: 60%;
        display: block;
        margin-left: -25px;
        background-color: blue;
        border: none;
      }
    }
  }
}
</style>
